<template>
    <view>
        <!-- 搜索框 -->
		<SearchBar></SearchBar>

        <!-- 标签页（分段器） -->
        <!-- text: 分段器样式类型-->
        <view class="tab">
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" style-type="text" active-color="#EB4450"></uni-segmented-control>
        <view class="content">
            <view class="content-item">
                <navigator 
                class="goods-item" 
                v-for="(item,index) in goodsList" 
                :key="index"
                :url="'/pages/goods_detail/index?id='+item.goods_id"
                >
                    <image :src="item.goods_small_logo || 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1424326754,4004839403&fm=26&gp=0.jpg'"></image>
                    <view class="desc">
                        <view class="title">{{item.goods_name}}</view>
                        <text>￥{{item.goods_price}}</text>
                    </view>
                </navigator>
            </view>
        </view>
    </view>
    </view>
</template>

<script>
// 分段器引入
// https://ext.dcloud.net.cn/plugin?id=54
import SearchBar from '@/components/SearchBar'
import {uniSegmentedControl} from '@dcloudio/uni-ui'
export default {
    data(){
        return{
            items: ['综合','销量','价格'],
            current: 0,
            goodsList:[],
            total:0,
            params:{
                cid:null,
                pagenum:1,
                pagesize:10
            }
        }
    },
    components:{
        SearchBar,
        // 作为子组件使用
        uniSegmentedControl 
    },
    methods:{
        onClickItem(e){
            if (this.current !== e.currentIndex) {
                this.current = e.currentIndex;
            }
        },
        // 无promise版本
        // loadGoods(refresh=false){
        //     uni.request({
        //       url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
        //       data: this.params
        //     }).then(res => {
        //         this.total = res[1].data.message.total;
        //         // 判断请求是刷新发出还是onLoad发出
        //         if(refresh){
        //             this.goodsList = res[1].data.message.goods;
        //             // 获取数据后停止下拉刷新
        //             uni.stopPullDownRefresh();
        //             uni.showToast({
        //               title: '已加载'
        //             })
        //         }else{
        //             // 上拉加载下一页时追加加载数据
        //             // onLoad进入时goodsList为空
        //            this.goodsList = [...this.goodsList,...res[1].data.message.goods];
        //         }
        //     })
        // }
        async loadGoods(refresh=false){
            const res = await this.request({
              url: '/goods/search',
              data: this.params
            });
            this.total = res.total;
            // 判断请求是刷新发出还是onLoad发出
            if(refresh){
                this.goodsList = res.goods;
            }else{
                // 上拉加载下一页时追加加载数据
                // onLoad进入时goodsList为空
                this.goodsList = [...this.goodsList,...res.goods];
            }
            return Promise.resolve();
        }
    },
    onLoad(option){
        // url带的参数可以再onLoad方法中接收
        this.params.cid = option.id;
        this.loadGoods();
    },
    // 上拉加载下一页
    //使用滚动条触底事件
    onReachBottom(){
        // 使用天花板函数向上取整
        if(this.params.pagenum >= Math.ceil(this.total / this.params.pagesize)){
            // 提示没有下一页
            uni.showToast({
              title: '没有下一页了',
              icon:'none'
            });
        }else{
            // 继续加载下一页
            this.params.pagenum++;
            this.loadGoods();
        }
    },
    // 下拉刷新本页面
    // 无promise版本
    // onPullDownRefresh(){
    //     this.params.pagenum = 1;
    //     this.loadGoods(true);
    // }
    //promise版本
    async onPullDownRefresh(){
        uni.showToast({
            title: '已加载'
        })
        this.params.pagenum = 1;
        // 获取数据后停止下拉刷新
        await this.loadGoods(true);
        uni.stopPullDownRefresh();
    }
}
</script>

<style lang="scss">
.goods-item{
    display: flex;
    padding:20rpx;
    border-bottom: 1px solid #c0c0c0;
    &:last-child{
        border-bottom:0;
    }
    image{
        flex:1;
        height:200rpx;
    }
    .desc{
        flex:2;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-left:20rpx;
        .title{
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 3;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
        text{
            color: #FF2F41;
        }
    }
}
</style>